/** @format */

import { ConfigProvider, TimePicker } from "antd";
import locale from "antd/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";

const { RangePicker } = TimePicker;
const dateFormat = "HH:mm";

interface WorkDateOfTimeProps {
  value?: string;
  onChange?: (value: string) => void;
}

type RangeValueType<DateType> = [
  start: DateType | null | undefined,
  end: DateType | null | undefined
];

const WorkDateOfTime: React.FC<WorkDateOfTimeProps> = (props) => {
  const { value, onChange } = props;

  const onChangeHandler = (_: any, dateStrings: [string, string]) => {
    onChange?.(dateStrings[0] + ":00-" + dateStrings[1] + ":00");
  };

  const getTime = (index: number) => {
    const placeholder = "1000-01-01 ";

    if (value && value.length > 0) {
      const times = (value as string).split("-");
      if (times && times.length >= 2) {
        return placeholder + times[index];
      }
    }

    return placeholder + "00:00";
  };

  return (
    <ConfigProvider locale={locale}>
      <RangePicker
        hourStep={1}
        minuteStep={15}
        secondStep={10}
        format={dateFormat}
        defaultValue={[
          dayjs(getTime(0), dateFormat, "zh-cn"),
          dayjs(getTime(1), dateFormat, "zh-cn"),
        ]}
        onChange={onChangeHandler}
      />
    </ConfigProvider>
  );
};

export default WorkDateOfTime;
